@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

/* 整体暗色风格适配 */
html.dark {
  $border-style: #303030;
  $color-white: #fff;

  /* 自定义深色背景颜色 */
  --el-bg-color: #182855;
  --el-bg-deep-color: #06133c;
  --el-border-color: #4bc4d6;
  --el-disabled-border-color: #008296;
  --el-border-color-hover: #8ff2ff;
  --el-select-bg-color: #182855;
  --el-disabled-bg-color: transparent;
  --el-mask-color: rgb(14 24 51 / 80%);

  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(253 253 253 / 12%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #ffffff3f;

  .navbar,
  .tags-view,
  .contextmenu,
  .sidebar-container,
  .horizontal-header,
  .sidebar-logo-container,
  .horizontal-header .el-sub-menu__title,
  .horizontal-header .submenu-title-noDropdown {
    background: var(--el-bg-color) !important;
  }

  .app-main {
    background: var(--el-bg-color) !important;
  }

  .logic-flow-view,
  .wangeditor {
    filter: invert(0.9) hue-rotate(180deg);
  }

  /* 标签页 */
  .tags-view {
    .arrow-left,
    .arrow-right {
      border-right: 1px solid $border-style;
      box-shadow: none;
    }

    .arrow-right {
      border-left: 1px solid $border-style;
    }

    .scroll-item {
      .el-icon-close {
        &:hover {
          color: rgb(255 255 255 / 85%) !important;
          background-color: rgb(255 255 255 / 12%);
        }
      }
    }
  }

  /* 项目配置面板 */
  .right-panel-items {
    .el-divider__text {
      --el-bg-color: var(--el-bg-color);
    }

    .el-divider--horizontal {
      border-top: none;
    }
  }

  /* 表单设计器 */
  .design-form {
    .el-main.config-content,
    .el-header,
    .el-main.widget-empty,
    .widget-form-list,
    .el-aside,
    .widget-view {
      background: var(--el-bg-color) !important;
    }

    .form-edit-widget-label a {
      color: $color-white;
      background: var(--el-color-primary);
      border: none;
      border-radius: 5px;
    }

    .el-aside {
      color: $color-white;
    }
  }

  /* intro.js */
  .introjs-tooltip-title,
  .introjs-tooltiptext {
    color: var(--el-color-primary);
  }

  .el-select {
    --el-select-border-color-hover: var(--el-border-color-hover);
    --el-select-disabled-color: var(--el-disabled-text-color);
    --el-select-disabled-border: var(--el-disabled-border-color);
    --el-select-font-size: var(--el-font-size-base);
    --el-select-close-hover-color: var(--el-text-color-secondary);
    --el-select-input-color: var(--el-text-color-placeholder);
    --el-select-multiple-input-color: var(--el-text-color-regular);
    --el-select-input-focus-border-color: var(--el-color-primary);
  }

  .el-calendar-table td.is-today {
    color: #fff;
  }

  .el-calendar-table .prev .el-calendar-day:hover {
    background-color: transparent;
  }

  .el-calendar-table .next .el-calendar-day:hover {
    background-color: transparent;
  }

  .el-calendar-table .current .el-calendar-day:hover {
    background-color: #27a2a2;
  }

  .el-calendar-table td.is-selected {
    background-color: transparent;
  }

  .el-select__wrapper.is-disabled {
    background-color: var(--el-disabled-bg-color);
  }

  .el-popper.is-light {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
  }

  .el-popper.is-light .el-popper__arrow::before {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
  }

  .el-timeline-item__tail {
    border-left: 2px solid rgb(39 162 162 / 20%);
  }

  .el-select-dropdown__item.is-hovering {
    background-color: #0f5959;
  }

  .el-cascader-panel {
    --el-cascader-node-background-hover: #0f5959;
  }

  .el-dropdown-menu {
    background-color: var(--el-bg-color);

    .el-dropdown-menu__item:not(.is-disabled):hover {
      background-color: #27a2a2;
    }

    .el-dropdown-menu__item:not(.is-disabled):focus {
      background-color: transparent;
    }
  }

  .el-picker-panel,
  .el-picker-panel__footer {
    background-color: var(--el-bg-color);
  }

  .el-picker-panel [slot="sidebar"],
  .el-picker-panel__sidebar {
    background-color: var(--el-bg-color);
  }

  .el-input {
    --el-input-border-color: var(--el-border-color);
    --el-input-bg-color: transparent;
    --el-disabled-bg-color: transparent;
    --el-disabled-border-color: var(--el-border-color);
  }

  .el-card {
    --el-card-bg-color: var(--el-bg-color);
    --el-card-border-color: var(--el-border-color);
  }

  .el-table,
  .el-table-v2 {
    --el-table-row-hover-bg-color: #27a2a2;
  }

  .el-backtop {
    --el-backtop-bg-color: rgb(72 72 78);
    --el-backtop-hover-bg-color: var(--el-color-primary);

    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  }

  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
  }

  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
  .el-icon {
    &.el-dialog__close,
    &.el-drawer__close,
    &.el-message-box__close,
    &.el-notification__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%) !important;
        background-color: rgb(255 255 255 / 12%);

        .pure-dialog-svg {
          color: rgb(255 255 255 / 85%) !important;
        }
      }
    }
  }

  .el-button--primary {
    --el-button-text-color: var(--el-border-color-hover);
    --el-button-bg-color: transparent;
    --el-button-border-color: var(--el-border-color-hover);
    --el-button-outline-color: var(--el-border-color-hover);
    --el-button-active-color: var(--el-border-color-hover);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-border-color-hover);
    --el-button-hover-bg-color: transparent;
    --el-button-hover-border-color: var(--el-color-white);
    --el-button-active-bg-color: transparent;
    --el-button-active-border-color: var(--el-border-color-hover);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: transparent;
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
  }

  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体浅色风格在 src/style/element-plus.scss 文件进行了适配 */
  .pure-message {
    background-color: rgb(36 37 37) !important;
    background-image: initial !important;
    box-shadow:
      rgb(13 13 13 / 12%) 0 3px 6px -4px,
      rgb(13 13 13 / 8%) 0 6px 16px 0,
      rgb(13 13 13 / 5%) 0 9px 28px 8px !important;

    & .el-message__content {
      color: $color-white !important;
      pointer-events: all !important;
      background-image: initial !important;
    }

    & .el-message__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%);
        background-color: rgb(255 255 255 / 12%);
      }
    }
  }

  /* 自定义菜单搜索样式 */
  .pure-search-dialog {
    .el-dialog__footer {
      box-shadow:
        0 -1px 0 0 #555a64,
        0 -3px 6px 0 rgb(69 98 155 / 12%);
    }

    .search-footer {
      .search-footer-item {
        color: rgb(235 235 235 / 60%);

        .icon {
          box-shadow: none;
        }
      }
    }
  }

  /* ReSegmented 组件 */
  .pure-segmented {
    color: rgb(255 255 255 / 65%);
    background-color: #000;

    .pure-segmented-item-selected {
      background-color: #1f1f1f;
    }

    .pure-segmented-item-disabled {
      color: rgb(255 255 255 / 25%);
    }
  }

  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
  .pure-scrollbar {
    scrollbar-color: rgb(63 64 66) transparent;

    ::-webkit-scrollbar-thumb {
      background-color: rgb(63 64 66);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgb(92 93 96);
    }
  }
}

html {
  .el-calendar-table td.is-selected {
    background-color: transparent;
  }

  .el-calendar-table td.is-today {
    color: #000;
  }
}
